<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Personleft active="study"/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Memtitle name="添加教育经历"/>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="margin-top: 20px;">
                    <el-form-item label="学校名称" prop="college">
                        <el-input placeholder="请输入" v-model="form.college" style="width: 500px;"/>
                    </el-form-item>
                    <el-form-item label="时间" prop="timeRange">
                        <el-date-picker
                                v-model="form.timeRange"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="学历" prop="education">
                        <el-select v-model="form.education" :loading="xueliLoading"
                                   placeholder="请选择学历">
                            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                       v-for="(item, index) in xuelilist"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="专业" prop="special">
                        <el-input placeholder="请输入专业" v-model="form.special" style="width: 400px;"/>
                    </el-form-item>
                    <el-form-item label="主修课程" prop="specialDescribe">
                        <el-input type="textarea" v-model="form.specialDescribe" rows="5" style="width: 60%"
                                  placeholder="请输入主修课程"/>
                    </el-form-item>
                    <el-form-item style="margin-top: 40px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                   type="primary"
                                   @click="onSubmit">保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import { cvEductionAdd, updateEducation, CVEducationById, EducationState } from '../../assets/js/domains'

export default {
  name: 'PersonWorkAdd',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      tmevalue: '',
      form: {},
      rules:{
        college:[
          { required: true, message: '请输入学校名称', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        timeRange:[
          { required: true, message: '请选择时间', trigger: 'change' },
        ],
        education:[
          { required: true, message: '请选择学历', trigger: 'change' },
        ],
        special:[
          { required: true, message: '请输入专业', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        specialDescribe:[
          { validator: this.validSensWords, trigger: 'blur' }
        ]
      },
      xuelilist: [],
      xueliLoading: true
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.form.userUid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    this.getEducationState()
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getpost()
    }
  },
  methods: {
    getEducationState: function () {
      const _this = this
      EducationState().then(function (res) {
        _this.xueliLoading = false
        if (res.code === 200) {
          _this.xuelilist = res.data
        }
      })
    },
    onSubmit(){
      this.$refs.form.validate(valid => {
        if(!valid){
          this.$message.error("请完善后再保存！");
          return
        }
        this.submitData()
      })
    },
    submitData() {
      const _this = this
      let params = Object.assign({}, this.form)
      params.approval = '1'
      params.startTime = this.form.timeRange[0]
      params.endTime = this.form.timeRange[1]
      if (this.form.id) {
        updateEducation(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/study' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      } else {
        cvEductionAdd(params).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/study' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {
              }
            })
          }
        })
      }
    },
    getpost () {
      const _this = this
      CVEducationById({ id: this.form.id }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
          _this.form.timeRange = [
            _this.form.startTime ? _this.form.startTime : '',
             _this.form.endTime ? _this.form.endTime : ''
          ]
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";
</style>
